<template>
	<view class="page">
		<view class="my-map">
			<map id="map" :latitude="location.latitude" :longitude="location.longitude" :markers="covers"></map>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				opt:{},
				map:null,
				location:{
					latitude: null,
					longitude: null,
				},
				covers: []
			}
		},
		onLoad(options) {
			let that = this
			this.LOGINACTION()
			
			this.INITWXJSDK(this.CONFIG.appid, location.origin + location.pathname + location.search, ()=>{
				that.$wx.hideOptionMenu();
			},['hideOptionMenu'])
			
			if(options.longitude){
				this.location.longitude = options.longitude
				this.location.latitude = options.latitude
				this.opt = options
				this.setCover()
			}else{
				options.name = options.name || '缺少坐标 - 自定位'
				uni.getLocation({
					type: 'wgs84',
					success:  (res) => {
						console.log(res);
						this.location.longitude = res.longitude //经度
						this.location.latitude = res.latitude // 纬度
						this.opt = options
						this.setCover()
					}
				});
			}
		},
		methods:{
			setCover(){
				this.covers = [
					{
						id:'marker',
						longitude: this.location.longitude,
						latitude: this.location.latitude,
						iconPath: '../../static/roomInfo/marker.png',
						callout:{
							content:this.opt.name,
							color:'#333333',
							fontSize:uni.upx2px(28),
							borderRadius:uni.upx2px(10),
							borderWidth:'1',
							borderColor:'#000000',
							bgColor:'#FFFFFF',
							padding:uni.upx2px(30),
							display:'ALWAYS',
							textAlign:'center'
						}
					}
				]
			}
		}
	}
</script>

<style>
	.my-map{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	#map{
		height: 100%;
		width: 100%;
	}
</style>
